import React from 'react';
import {connect} from 'react-redux';
import {Modal} from 'antd-mobile';
import request from "../../../assets/js/utils/request";
import {LocalParam, lazyImg,GoPagePush} from "../../../assets/js/utils";
import Css from '../../../assets/css/user/order/index.css';
import UpRefresh from "../../../assets/js/libs/uprefresh";
class orderOrder extends React.Component{
    constructor(props){
        super(props);
        this.state={
            status:LocalParam(props.location.search).search.status?LocalParam(props.location.search).search.status:'',
            aOrder:[]
        }
        this.oUpRefresh=null;
        this.curPage=1;
        this.maxPage=0;
        this.offsetBottom=100
    }
    componentDidMount(){
        this.getDataOrder();
    }
    //获取订单列表
    getDataOrder(){
        let sUrl=window.base.config.baseUrl+'/user/myorder/index?uid='+this.props.state.redLogin.uid+'& status='+this.state.status+'&token='+window.base.config.token+'&page=1';
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                this.maxPage=res.pageinfo.pagenum
                this.setState({aOrder:res.data},()=>{
                    lazyImg();
                    this.getScrollPage();
                })
            }
        })
    }
    //获取分页数据
    getScrollPage(){

        this.oUpRefresh=new UpRefresh({
            "curPage":this.curPage,
            "maxPage":this.maxPage,
            "offsetBottom":this.offsetBottom},
            curPage=>{
                let sUrl=window.base.config.baseUrl+'/user/myorder/index?uid='+this.props.state.redLogin.uid+'& status='+this.state.status+'&token='+window.base.config.token+'&page='+curPage;
                request(sUrl,'get').then((res)=>{
                    if (res.code===200){
                        let temAOrder=this.state.aOrder;
                        for(let i in res.data){
                            temAOrder.push(res.data[i])
                        }
                        this.setState({aOrder:temAOrder},()=>{
                            lazyImg();
                        })
                    }
                })
        });
    }
    //取消订单
    clearOrder(e,orderNum,index){
        e.stopPropagation()
        Modal.alert('确定要删除吗？', '', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确定', onPress: () =>{
                    let sUrl=window.base.config.baseUrl+'/user/myorder/clearorder?uid='+this.props.state.redLogin.uid+'&ordernum='+orderNum+'&token='+window.base.config.token;
                    request(sUrl,'get').then((res)=>{
                        if (res.code===200){
                            let temAOrder=this.state.aOrder;
                            temAOrder.splice(index,1)
                            this.setState({aOrder:temAOrder})
                        }
                    })
                }
            },

        ]);

    }
    //确定订单
    firmOrder(e,orderNum,index){
        e.stopPropagation()
        Modal.alert('确定要删除吗？', '', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确定', onPress: () =>{
                    let sUrl=window.base.config.baseUrl+'/user/myorder/finalorder?uid='+this.props.state.redLogin.uid+'&ordernum='+orderNum+'&token='+window.base.config.token;
                    request(sUrl,'get').then((res)=>{
                        if (res.code===200){
                            let temAOrder=this.state.aOrder;
                            temAOrder[index].status='2';
                            this.setState({aOrder:temAOrder})
                        }
                    })
                }
            },

        ]);
    }
    goPage(url){
        GoPagePush(this.props,url)
    }
    componentWillUnmount(){
        this.oUpRefresh=null;
        this.setState = (state, callback) => {
            return;
        };
    }
    render(){
        return(
            <div className={Css['order_main']}>
                {
                    this.state.aOrder.length>0?this.state.aOrder.map((item,index)=>{
                        return(
                            <div className={Css['group']} key={index} onClick={this.goPage.bind(this,'orders/orderDetail?ordernumber='+item.ordernum)}>
                                <div className={Css['row']}>
                                    <div className={Css['order_nub']}>订单编号：{item.ordernum}</div>
                                    <div className={Css['order_status']}>{item.status==='0'?'待付款':item.status==='1'?'待收货':item.status==='2'?'已收货':''}</div>
                                </div>
                                <div className={Css['row']}>
                                    {
                                        item.goods.length>0?item.goods.map((item2,index2)=>{
                                            return(
                                                <div className={Css['order_pro']} key={index2}>
                                                    <div className={Css['order_img']}>
                                                        <img  src={require('../../../assets/images/commen/lazyImg.jpg')} data-echo={item2.image} alt={item2.title} />
                                                    </div>
                                                    <div className={Css['order_font']}>
                                                        <div className={Css['order_title']}>{item2.title}</div>
                                                        <div className={Css['order_amount']}>x{item2.amount}</div>
                                                    </div>
                                                </div>
                                            )
                                        }):''
                                    }
                                </div>
                                <div className={Css['row']}>
                                    <div className={Css['order_tatol']}>
                                        实付金额：¥{item.total}
                                    </div>
                                    {item.status!=='2'?
                                        <div className={Css['order_btn']} onClick={item.status==='0'?(e)=>{this.clearOrder(e,item.ordernum,index)}:item.status==='1'?(e)=>{this.firmOrder(e,item.ordernum,index)}:()=>{}}>
                                            {item.status==='0'?'取消订单':item.status==='1'?'确认订单':''}
                                        </div>
                                        :''}

                                </div>
                            </div>
                        )
                    }):''
                }
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(orderOrder)